; (function () {
  const template = `<div class="row placeholders">
    <div v-for="(hobby,index) in hobbies" :key="index" class="col-xs-6 col-sm-3 placeholder">
      <img src="" width="200"
        height="200" class="img-responsive" alt="Generic placeholder thumbnail">
      <h4>{{hobby}}</h4>
      <span class="text-muted">
        <a href="#" @click="deleteHobby(index)">删除</a>
      </span>
    </div>
  </div>`

  window.Dashboar = {
    // 声明当前子组件接收父组件的属性
    props: ['hobbies'],
    template,
    data() {
      return {

      }
    },
    methods: {
      // 删除爱好 
      deleteHobby(index) {
        // 子组件中触发事件函数调用
        // 触发父组件中 delete_hobby 事件进行删除操作 
        this.$emit('delete_hobby', index)
      }
    },
  }
})()